<template>
	<d2-container>
		<!-- 搜索 -->
		<template slot="header" class="query-area">
			<el-form ref="indexForm" :model="indexForm" label-width="100px" style="height:auto">
				<template>
					<el-row class="query-row">
						<el-col :span="4">
							<el-form-item label="分类名称" prop="categoryName">
								<el-input type="text" v-model="indexForm.categoryName" placeholder="请输入分类名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="分类编码" prop="categoryCode">
								<el-input type="text" v-model="indexForm.categoryCode" placeholder="请输入分类编码"></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="4">
							<el-form-item label="上级分类" prop="parentCategoryName">
								<el-input type="text" v-model="indexForm.parentCategoryName" placeholder="请输入上级分类"></el-input>
							</el-form-item>
						</el-col> -->
						<el-col :span="6">
							<el-form-item label="创建时间" prop="time">
								<el-date-picker v-model="time" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp" align="right" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item>
								<el-button type="primary" size="medium" @click="submitForm('indexForm')">查询</el-button>
								<el-button type="primary" size="medium" @click="resetForm('indexForm')">重置</el-button></el-form-item>
						</el-col>
					</el-row>
				</template>
			</el-form>
		</template>
		
		<template>
			<div>全部分类</div>
			<el-tree accordion :data="treeData" :props="treeProps" style="width: 12%; float: left;"></el-tree>
		</template>
		
		<!-- 列表 -->
		<template>
			<el-button slot="header" type="primary" @click="addChange">新 增</el-button>
			
			<el-table :data="tableData" stripe border row-key="id" @selection-change="handleSelectionChange" style="width: 85%;">
				<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
				
				<el-table-column prop="categoryPicture" label="分类图片" width="80" align="center">
					<template slot-scope="scope">
						<el-image v-if="scope.row.categoryPicture" style="width: 50px; height: 50px" :src="scope.row.categoryPicture"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="categoryName" label="分类名称"></el-table-column>
				<el-table-column prop="categoryCode" label="分类编码" width="120"></el-table-column>
				
				<el-table-column prop="categoryType" label="层级" width="90" align="center">
					<template slot-scope="scope">
						<el-tag type="warning" v-if="scope.row.categoryType=='1'">一级</el-tag>
						<el-tag type="success" v-if="scope.row.categoryType=='2'">二级</el-tag>
						<el-tag v-if="scope.row.categoryType=='3'">三级</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="parentCategoryName" label="上级分类" width="140"></el-table-column>
				<el-table-column prop="platformCategoryName" label="关联首页分类" width="140" v-if="isCanEditPlatformCategory"></el-table-column>
				
				<el-table-column prop="sort" label="排序" width="80" align="center"></el-table-column>
				<el-table-column prop="isEnable" label="是否启用" width="100" align="center">
					<template slot-scope="scope">
						<el-tag type="danger" v-if="scope.row.isEnable==0">否</el-tag>
						<el-tag v-if="scope.row.isEnable==1">是</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column prop="remark" label="备注" width="140"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="100" :formatter="forDateCreate"></el-table-column>
				<el-table-column prop="reviseTime" label="修改时间" width="100" :formatter="forDateRevise"></el-table-column>
				
				<el-table-column fixed="right" label="操作" width="150">
					<template slot-scope="scope">
						<el-button type="warning" size="small" @click="updateRow(scope.row.id)">编辑</el-button>
						<el-button @click.native.prevent="deleteRow(scope.row)" type="danger" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		
		<!-- 页脚部分 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					:total="total"
					layout="total, sizes, prev, pager, next, jumper"
				></el-pagination>
			</div>
		</template>
		
		<!-- 弹窗 -->
		<template>
			<keep-alive>
				<addPage
					:addPage="addComponent"
					@on-addPage-change="onAddPageChange"
					@on-loadlist-change="fetchData"
				></addPage>
			</keep-alive>
			
			<keep-alive>
				<updatePage
					:uId="updateId"
					:updatePage="updateComponent"
					@on-updatePage-change="onUpdatePageChange"
					@on-loadlist-change="fetchData"
					@on-id-change="onIdChange"
				></updatePage>
			</keep-alive>
		</template>
	</d2-container>
</template>

<script>
	import { mapState } from 'vuex'
	import { findProductCategoryListByPage, findCategoryTree, del } from '@api/product/productCategoryFront'
	import addPage from './add'
	import updatePage from './update'
	import dayjs from 'dayjs'
	export default {
		name: 'category-index',
		components: {
			addPage,
			updatePage
		},
		computed: {
			...mapState('d2admin/permission', ['shopId']),
			
			isCanEditPlatformCategory() {
				return this.shopId === 0 ? true : false;
			},
		},
		data() {
			return {
				indexForm: {
					categoryName: '',
					categoryCode: '',
					parentCategoryName: '',
					createTimeBegin: '',
					createTimeEnd: ''
				},
				time: [],
				pickerOptions: {
					shortcuts: [{
							text: '最近一周',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近一个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近三个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
								picker.$emit('pick', [start, end])
							}
						}
					]
				},
				treeData: [],
				treeProps: {
					label: function(data, node) {
						return data.categoryName;
					},
				},
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				multipleSelection: [],
				addComponent: false,
				updateComponent: false,
				updateId: ""
			}
		},
		methods: {
			/**双向绑定 start */
			addChange() {
				this.addComponent = !this.addComponent
			},
			onAddPageChange(val) {
				this.addComponent = val; //④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
			},
			updateChange() {
				this.updateComponent = !this.updateComponent
			},
			onUpdatePageChange(val) {
				this.updateComponent = val //④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
			},
			idChange(val) {
				this.updateId = val;
			},
			onIdChange(val) {
				this.updateId = val //④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
			},
			/**双向绑定 end */
			resetPage() {
				this.currentPage = 1,
					this.pageSize = 10,
					this.total = 0
			},
			submitForm(formName) {
				this.resetPage()
				this.fetchData()
			},
			resetForm(formName) {
				this.$refs[formName].resetFields()
				this.time = []
				this.resetPage()
				this.fetchData()
			},
			fetchData() {
				this.loading = true
				findCategoryTree({

				}).then(res => {
					this.treeData = res.data
					this.loading = false
				}).catch(err => {
					console.log('err', err)
					this.loading = false
				})

				this.loading = true
				this.indexForm.createTimeBegin = this.time[0] == null ? '' : dayjs(this.time[0]).format(
					'YYYY-MM-DD HH:mm:ss')
				this.indexForm.createTimeEnd = this.time[1] == null ? '' : dayjs(this.time[1]).format(
					'YYYY-MM-DD HH:mm:ss')
				findProductCategoryListByPage({
					categoryName: this.indexForm.categoryName,
					categoryCode: this.indexForm.categoryCode,
					parentCategoryName: this.indexForm.parentCategoryName,
					startTime: this.indexForm.createTimeBegin,
					endTime: this.indexForm.createTimeEnd,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				}).then(res => {
					this.tableData = res.data.content
					this.total = res.data.total
					this.loading = false
				}).catch(err => {
					console.log('err', err)
					this.loading = false
				})
			},
			handleSizeChange(val) {
				this.pageSize = val
				this.fetchData()
			},
			handleCurrentChange(val) {
				this.currentPage = val
				this.fetchData()
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			deleteRow(row) {
				this.$confirm("确认删除" + row.categoryName + "？").then(_ => {
					this.loading = true
					del({
							id: row.id
						})
						.then(res => {
							if (res.code == '000000') {
								this.$message({
									message: res.message,
									type: "success"
								});
								this.fetchData();
								this.loading = false
							} else {
								this.$message({
									message: res.message,
									type: 'error'
								});
								return;
							}
						})
						.catch(err => {
							console.log("err", err);
							this.loading = false;
						});
				});
			},
			updateRow(id) {
				this.updateChange()
				this.idChange(id)
			},
			forDateCreate(row, column) {
				return row.createTime == null ? "" : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
			},
			forDateRevise(row, column) {
				return row.reviseTime == null ? "" : dayjs(row.reviseTime).format('YYYY-MM-DD HH:mm:ss')
			}
		},
		mounted() {
			this.fetchData()
		},
	}
</script>